<template>
  <div class="layout">
    <ContainerTitle text="个人基本信息" class="title"></ContainerTitle>
    <!-- 未通过/待通过详情 -->
    <div v-if="$route.query.status != 2">
      <div class="tableDiv" v-loading="loading">
        <div class="rowDiv">
          <div style="width: 50%; display: flex; justify-content: left">
            <div class="keyDiv">姓名</div>
            <div class="valueDiv">{{ detail.name }}</div>
          </div>
          <div style="width: 50%; display: flex; justify-content: left">
            <div class="keyDiv">年龄</div>
            <div class="valueDiv">
              {{ $getAgeByBirth(detail.birthMonthFmt) }}
            </div>
          </div>
        </div>
        <div class="rowDiv">
          <div style="width: 50%; display: flex; justify-content: left">
            <div class="keyDiv">性别</div>
            <div class="valueDiv">{{ detail.genderName }}</div>
          </div>
          <div style="width: 50%; display: flex; justify-content: left">
            <div class="keyDiv">学历</div>
            <div class="valueDiv">{{ detail.educationName }}</div>
          </div>
        </div>
        <div class="rowDiv">
          <div style="width: 50%; display: flex; justify-content: left">
            <div class="keyDiv">职业技能</div>
            <div class="valueDiv">{{ detail.skill }}</div>
          </div>
          <!-- <div style="width: 50%; display: flex; justify-content: left">
                                    <div class="keyDiv">联系电话</div>
                                    <div class="valueDiv">{{detail.contact}}</div>
                                </div> -->
        </div>
      </div>
      <!-- <div class="title">工作经验描述</div>
                        <div class="tableDiv desc">
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ detail.experienceDesc ?
                            detail.experienceDesc
                            : '无' }}
                        </div> -->
    </div>
    <!-- 简历通过详情 -->
    <div v-else>
      <div class="tableDiv" v-loading="loading">
        <div class="rowDiv">
          <div style="width: 50%; display: flex; justify-content: left">
            <div class="keyDiv">姓名</div>
            <div class="valueDiv">{{ detail.name }}</div>
          </div>
          <div style="width: 50%; display: flex; justify-content: left">
            <div class="keyDiv">年龄</div>
            <div class="valueDiv">
              {{ $getAgeByBirth(detail.birthMonthFmt) }}
            </div>
          </div>
        </div>
        <div class="rowDiv">
          <div style="width: 50%; display: flex; justify-content: left">
            <div class="keyDiv">性别</div>
            <div class="valueDiv">{{ detail.genderName }}</div>
          </div>
          <div style="width: 50%; display: flex; justify-content: left">
            <div class="keyDiv">学历</div>
            <div class="valueDiv">{{ detail.educationName }}</div>
          </div>
        </div>
        <div class="rowDiv">
          <div style="width: 50%; display: flex; justify-content: left">
            <div class="keyDiv">职业技能</div>
            <div class="valueDiv">{{ detail.skill }}</div>
          </div>
          <div style="width: 50%; display: flex; justify-content: left">
            <div class="keyDiv">联系电话</div>
            <div class="valueDiv">{{ detail.contact }}</div>
          </div>
        </div>
        <!-- <div class="rowDiv">
                                <div style="width: 50%; display: flex; justify-content: left">
                                    <div class="keyDiv">联系电话</div>
                                    <div class="valueDiv">{{detail.contact}}</div>
                                </div>
                            </div> -->
      </div>
      <div class="title">工作经验</div>
      <div v-if="experience.length > 0" v-loading="loading">
        <div
          class="tableDiv"
          v-for="(experience, index) in experience"
          :key="index"
        >
          <div class="rowDiv">
            <div style="width: 50%; display: flex; justify-content: left">
              <div class="keyDiv">公司名称</div>
              <div class="valueDiv">{{ experience.companyName }}</div>
            </div>
            <div style="width: 50%; display: flex; justify-content: left">
              <div class="keyDiv">工作时间</div>
              <div class="valueDiv" v-if="experience.beginDate">
                {{ experience.beginDate }} 至 {{ experience.endDate }}
              </div>
              <div class="valueDiv" v-else>无</div>
            </div>
          </div>
          <div class="rowDiv">
            <div style="width: 50%; display: flex; justify-content: left">
              <div class="keyDiv">部门</div>
              <div class="valueDiv">{{ experience.dept }}</div>
            </div>
            <div style="width: 50%; display: flex; justify-content: left">
              <div class="keyDiv">职位</div>
              <div class="valueDiv">{{ experience.post }}</div>
            </div>
          </div>
          <div class="rowDiv">
            <div style="display: flex; justify-content: left">
              <div class="keyDiv">工作内容</div>
              <div class="valueDivFull">{{ experience.workContent }}</div>
            </div>
          </div>
        </div>
      </div>
      <div v-else>无</div>
    </div>
    <ContainerTitle text="申请状态" class="title"></ContainerTitle>
    <div class="tableDiv" v-loading="loading">
      <div class="rowDiv">
        <div style="width: 50%; display: flex; justify-content: left">
          <div class="keyDiv">申请时间</div>
          <div class="valueDiv">{{ sendTime }}</div>
        </div>
        <div style="width: 50%; display: flex; justify-content: left">
          <div class="keyDiv">申请状态</div>
          <div class="valueDiv">{{ formatText(status) }}</div>
        </div>
      </div>
    </div>
    <!-- 简历状态通过但已录用和拒绝显示 -->
    <div v-if="$route.query.status == 2 && offerStatus" v-loading="loading">
      <div class="title">人员状态</div>
      <div class="tableDiv" v-loading="loading">
        <div class="rowDiv">
          <div style="width: 100%; display: flex; justify-content: left">
            <div class="keyDiv" style="width: 88px">状态</div>
            <div
              class="valueDiv"
              style="color: #10a217"
              v-if="offerStatus == 1"
            >
              录用
            </div>
            <div class="valueDiv" style="color: #d00000" v-else>拒绝</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 简历状态通过但未录用和拒绝显示 -->
    <div
      class="btnsDiv"
      v-show="!offerStatus && $route.query.status == 2"
      v-loading="loading"
    >
      <div @click="confirmReject()" style="background-color: #d00000">拒绝</div>
      <div @click="confirmPass()">录用</div>
    </div>
  </div>
</template>

<script>
// api
import { getApplyResumeDetail, Pass, Reject } from "@/common/api/company.js";
export default {
  name: "companyMyResumeDetail",
  meta: {
    name: "我申请的简历详情页",
  },
  data() {
    return {
      crumbs: [
        {
          label: "企业空间",
          value: "companyMsg",
        },
        { label: "人才服务", value: "" },
        {
          label: "我申请的简历",
          value: "companyMyResume",
        },
        {
          label: "申请简历详细资料",
          value: "companyMyResumeDetail",
          choose: true,
        },
      ],
      detail: {
        id: null,
        name: "", //姓名
        genderName: "", //性别
        birthMonthFmt: "", //出生年月
        educationName: "", // 教育
        contact: "", //类型方式
        expectSalary: "", //薪资要求
        idCard: "", //身份证
        address: "", //地址
        contact: "", //联系方式
        experienceDesc: "", // 工作经验描述
        sendTime: "", //投递时间
        status: "", // 1、待查看 2、已通过 3、未通过
      },
      experience: [
        {
          companyName: "", // 公司名称
          beginDate: "", // 开始日期
          endDate: "", // 结束日期
          dept: "", // 部门
          post: "", // 职位
        },
      ],
      sendTime: "", //投递时间
      status: "", // 1、待查看 2、已通过 3、未通过
      offerStatus: 1, //1 录取 2 拒绝
      loading: false, //加载状态
    };
  },
  async mounted() {
    // console.log("开始请求", this.$route.query.status);
    let status = this.$route.query.status;
    if (status != 2) {
      this.crumbs[3].label = "申请简历简介";
    }
    this.loading = true;
    await this.getApplyResumeDetail();
  },
  // activated(){
  //     this.loading = true;
  //     this.getApplyResumeDetail();
  // },
  methods: {
    // 获取申请简历详情
    async getApplyResumeDetail(id) {
      const res = await getApplyResumeDetail(this.$route.query.id);
      if (res.code != "200") {
        this.loading = false;
        return this.$message.warning(res.msg);
      }
      this.detail = res.data.library;
      this.experience = res.data.experience;
      this.status = res.data.status;
      this.offerStatus = res.data.offerStatus;
      this.sendTime = res.data.sendTime;
      this.loading = false;
      console.log("请求结束");
    },
    // 格式化显示文字
    formatText(status) {
      switch (status) {
        case "1":
          return "待通过";
          break;
        case "2":
          return "已通过";
          break;
        case "3":
          return "未通过";
          break;
        default:
          return "";
      }
    },
    /**
     * 确认录用
     */
    confirmPass() {
      this.$confirm("是否录用该人员为公司员工？")
        .then((res) => {
          this.Pass();
        })
        .catch((err) => {
          console.log(err);
        });
    },
    /**
     * 录用
     * @return {Promise<void>}
     */
    async Pass() {
      let { code, msg } = await Pass({ id: this.$route.query.id });
      if (code != 200) {
        return this.$message.error(msg);
      }
      this.$message.success("操作成功");
      this.getApplyResumeDetail();
    },
    /**
     * 确认拒绝
     */
    confirmReject() {
      this.$confirm("您确定拒绝该人员不为公司员工？")
        .then((res) => {
          this.Reject();
        })
        .catch((err) => {
          console.log(err);
        });
    },
    /**
     * 拒绝
     * @return {Promise<void>}
     */
    async Reject() {
      let { code, msg } = await Reject({ id: this.$route.query.id });
      if (code != 200) {
        return this.$message.error(msg);
      }
      this.$message.success("操作成功");
      this.getApplyResumeDetail();
    },
    goBack() {
      this.$router.back();
    },
  },
};
</script>

<style lang="scss" scoped>
 .backBtn {
  border: 1px solid #eeeeee;
  white-space: nowrap;
  font-size: 12px;
  height: 30px;
  width: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
}

 .backBtn:hover {
  cursor: pointer;
  box-shadow: 0px 0px 5px #eeeeee;
}

.roomDiv {
  display: flex;
  justify-content: center;
}

.roomDiv .leftDiv {
  min-width: 200px;
  text-align: left;
}

.roomDiv .rightDiv {
  width: 800px;
  margin-left: 30px;
}

 .topDiv {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

 .topDiv .msgDiv {
  font-size: 24px;
  font-weight: bold;
}

 .title {
  font-size: 20px;
  font-weight: bold;
  text-align: left;
  color: #045db9;
  border-bottom: 2px solid #045db9;
  padding: 10px 10px 10px 0;
  margin-top: 10px;
  margin-bottom: 20px;
}

 .tableDiv {
  border: 1px solid #eeeeee;
  color: #666666;
}

 .tableDiv:last-child {
  margin-bottom: 38px;
}

 .tableDiv.desc {
  border: 1px solid #eeeeee;
  color: #666666;
  padding: 20px;
  font-size: 14px;
  text-align: left;
}

 .tableDiv .rowDiv {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #eeeeee;
  font-size: 13px;
}

 .tableDiv .rowDiv .keyDiv {
  text-align: left;
  background-color: #f4f4f4;
  padding: 10px;
  width: 110px;
  flex-shrink: 0;
  box-sizing: border-box;
}

 .tableDiv .rowDiv .valueDiv {
  text-align: left;
  padding: 10px;
  width: 349px;
  word-break: break-all;
}
 .tableDiv .rowDiv .valueDivFull {
  text-align: left;
  padding: 10px;
  /* width: 349px; */
  word-break: break-all;
}

.btnsDiv {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 30px 0;
}

.btnsDiv div {
  padding: 10px 40px;
  color: #ffffff;
  background-color: #045db9;
  margin-right: 30px;
  font-size: 15px;
  border-radius: 5px;
}

.btnsDiv div:hover {
  cursor: pointer;
}
</style>